<template>
  <n-space vertical>
    <AnswerItem
      v-for="(item, index) in subjectList"
      :key="item._id"
      :item="item"
      :index="index"
      v-model:answer="item.answer"
    />
  </n-space>
</template>

<script setup>
import { ref, watch } from 'vue'
import AnswerItem from '@/components/AnswerItem.vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const subjectList = ref([])

const shijuanId = route.query.shijuanId
fetch(`http://localhost:3000/subjects/shijuan?subjectId=${shijuanId}`)
  .then(response => response.json())
  .then(data => {
    console.log(data)
    subjectList.value = data.data
  })

watch(
  () => subjectList.value,
  (newVal, oldVal) => {
    console.log(subjectList.value.map(i => i.answer))
  },
  { deep: true }
)
</script>

<style lang="scss" scoped>
// .list {
//   padding: 20px;
//   .item {
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     padding: 0 20px;
//     border-bottom: 1px solid #f0f0f0;
//   }
// }
</style>
